<template>
  <div class="footer-button-group" v-if="!hideFooterButtonGroup">
    <hr class="custom-hr" />
    <!--按钮-->
    <div class="buttons">
      <div class="flex">
        <el-button
          type="default"
          @click="editAlarmLabel"
          v-hasPermi="permissionMap.editTags"
          v-if="showEditAlarmLabelBtn"
        >
          <span>编辑告警标签</span>
        </el-button>
        <el-button type="default" @click="toPTZ" v-if="getShowPTZ()">
          <span>一键看向告警点</span>
        </el-button>
        <el-button
          type="default"
          @click="videoClick"
          v-hasPermi="permissionMap.video"
          v-if="
            ['1', '3', '4'].includes(orderData.warningSource) ||
            (orderData.warningSource === '11' && orderData.deviceCode)
          "
        >
          <span>实时视频</span>
        </el-button>
      </div>
      <div class="flex" v-if="!isDisabled() && isEventQuery">
        <el-button
          type="primary"
          @click="alarmAccept"
          class="confirmStyle"
          v-hasPermi="permissionMap.accept"
          v-if="orderData.enableAcceptanceMode === '1'"
        >
          <span>受理</span>
        </el-button>
        <div class="flex" v-else>
          <template v-if="orderData.orderStatus === '1'">
            <el-button
              type="primary"
              @click="commonClick('isTrueWarn')"
              v-hasPermi="['event:judge:shimko']"
            >
              <span>真警</span>
            </el-button>
            <el-button
              type="primary"
              @click="commonClick('isFalseWarn')"
              v-hasPermi="['event:judge:false']"
            >
              <span>误报</span>
            </el-button>
            <el-tooltip
              effect="dark"
              placement="top"
              popper-class="repeated-event-tooltip"
              :open-delay="1200"
            >
              <div slot="content" class="tooltip-content">
                不同告警来源的告警可能都是指向同一事件，同一告警来源的多次告警也可能指向同一事件，为了不对同一事件进行重复处理，您可以将告警事件置为重复告警，将其与之前已研判为真的事件进行关联。
              </div>
              <el-button
                type="primary"
                @click="commonClick('isRepeat')"
                v-hasPermi="['event:judge:rep']"
              >
                <span>重复告警</span>
              </el-button>
            </el-tooltip>
          </template>
          <el-button
            v-if="orderData.orderStatus === '2'"
            type="primary"
            @click="commonClick('isDispatch')"
            v-hasPermi="['event:dispatch:sched']"
          >
            <span>调度</span>
          </el-button>
          <el-button
            v-if="orderData.orderStatus === '4'"
            type="primary"
            @click="commonClick('isHandle')"
            v-hasPermi="['event:deal:dispo']"
          >
            <span>处置</span>
          </el-button>
          <el-button
            v-if="orderData.orderStatus === '5'"
            type="primary"
            v-hasPermi="['event:check:verif']"
            @click="commonClick('isCheck')"
          >
            <span>核实</span>
          </el-button>
          <el-button
            class="ml-12"
            type="primary"
            @click="commonClick('isRedeploy')"
            v-if="orderData.turnFlag == '1'"
            v-hasPermi="permissionMap.tran"
          >
            <span>转派</span>
          </el-button>
          <el-button
            class="ml-12"
            type="primary"
            @click="commonClick('isRollback')"
            v-if="orderData.rollbackFlag == '1'"
            v-hasPermi="permissionMap.rollback"
          >
            <span>回退</span>
          </el-button>
        </div>
        <el-divider direction="vertical" class="divider"></el-divider>
        <el-button
          type="default"
          v-hasPermi="['event:details:supervise']"
          @click="commonClick('isSupervision')"
          v-if="!isDisabled() && isEventQuery && isLeader"
          class="el-button-primary_is-plain"
          plain
        >
          <span>督办</span>
        </el-button>
        <el-button
          type="default"
          @click="commonClick('isInstructions')"
          v-show="orderData.leaderFlag == '1'"
          :disabled="orderData.leaderFlag !== '1'"
          v-hasPermi="permissionMap.inst"
          class="el-button-primary_is-plain"
          plain
        >
          <span>转领导批示</span>
        </el-button>
        <el-button
          type="default"
          class="el-button-primary_is-plain"
          @click="commonClick('closeRemarkVisible')"
          v-hasPermi="permissionMap.close"
          plain
        >
          <span>关闭</span>
        </el-button>
      </div>
      <div class="flex" v-if="isRecycleBin && getRecycleBinPage() === '11'">
        <el-tooltip
          effect="dark"
          placement="top"
          content="置为真警后可在告警事件、事件管理中进行处理。"
        >
          <el-button
            v-hasPermi="['recy:true']"
            type="primary"
            :disabled="isDisabled()"
            @click="trueWarnClick(orderData)"
          >
            <span>真警</span>
          </el-button>
        </el-tooltip>
      </div>
      <div
        class="flex"
        v-if="
          isCustOperate &&
          orderData.judgeResult === '3' &&
          orderData.editFlag === '1'
        "
      >
        <el-button
          type="primary"
          @click="trueWarnClickByCustOperate"
          v-hasPermi="[
            localFlag ? 'dependency:oper:config:real' : 'oper:config:real',
          ]"
          >真警
        </el-button>
        <el-popover
          placement="top-end"
          popper-class="my_popover"
          ref="popover"
          width="220"
        >
          <div class="pop_cont">
            <el-button size="mini" @click="falseWarnClickByCustOperate('0')"
              >算法问题</el-button
            >
            <el-button size="mini" @click="falseWarnClickByCustOperate('1')"
              >非算法问题</el-button
            >
          </div>
          <el-button
            class="ml-12"
            slot="reference"
            type="primary"
            v-hasPermi="[
              localFlag ? 'dependency:oper:config:false' : 'oper:config:false',
            ]"
            >误报
          </el-button>
        </el-popover>
      </div>
    </div>
    <!-- 真警dialog-->
    <TrueWarnDialog :orderData="orderData" :visible.sync="isTrueWarn" />
    <!-- 假警dialog-->
    <FalseWarnDialog :orderData="orderData" :visible.sync="isFalseWarn" />
    <!-- 重复dialog-->
    <RepeatDialog :visible.sync="isRepeat" :orderData="orderData" />
    <!--  转领导批示dialog-->
    <InstructionsDialog :visible.sync="isInstructions" :orderData="orderData" />
    <!--  转派dialog  -->
    <RedeployDialog :visible.sync="isRedeploy" :orderData="orderData" />
    <!--  回退  -->
    <RollbackDialog :visible.sync="isRollback" :orderData="orderData" />
    <!--  告警标签  -->
    <AlarmLabel :visible.sync="showLabelConfig" :orderData="orderData" />
    <!--  关闭  -->
    <CloseEventDialog
      :visible.sync="closeRemarkVisible"
      :orderData="orderData"
    />
    <!-- 事件调度dialog-->
    <DispatchDialog
      :visible.sync="isDispatch"
      :orderData="orderData"
      :orderId="orderData.warningOrderId"
    />
    <!--  处置dialog-->
    <HandleDialog
      :visible.sync="isHandle"
      :orderData="orderData"
      :orderId="orderData.warningOrderId"
    />
    <!--  核实dialog-->
    <CheckDialog :visible.sync="isCheck" :orderData="orderData" />
    <!--  督办弹窗  -->
    <SupervisionDialog
      :visible.sync="isSupervision"
      :orderData="orderData"
    ></SupervisionDialog>
  </div>
</template>

<script>
import TrueWarnDialog from "@/views/pages/eventManagement/eventDialog/trueWarnDialog";
import FalseWarnDialog from "@/views/pages/eventManagement/eventDialog/falseWarnDialog.vue";
import RepeatDialog from "@/views/pages/eventManagement/eventDialog/repeatDialog.vue";
import RedeployDialog from "@/views/pages/eventManagement/eventDialog/redeployDialog.vue";
import RollbackDialog from "@/views/pages/eventManagement/eventDialog/rollbackDialog.vue";
import InstructionsDialog from "@/views/pages/eventManagement/eventDialog/instructionDialog.vue";
import AlarmLabel from "@/views/pages/eventManagement/eventDialog/alarmLabel";
import CloseEventDialog from "@/views/pages/eventManagement/alarmEventDetail/closeEventDialog.vue";
import DispatchDialog from "@/views/pages/eventManagement/eventDialog/dispatchDialog.vue";
import HandleDialog from "@/views/pages/eventManagement/eventDialog/handleDialog.vue";
import CheckDialog from "@/views/pages/eventManagement/eventDialog/checkDialog";
import SupervisionDialog from "@/views/pages/eventManagement/eventDialog/SupervisionDialog";
import { restoreWarningOrder } from "@/api/modules/eventManagement/recycleBin";
import { doControlPreset, doPtzLocationCmd } from "@/api/video/video";
import {
  getDeviceChannel4Tt,
  getDeviceInfo,
} from "@/api/modules/eventManagement/eventDetail";
import { accept } from "@/api/modules/eventManagement/eventJudge";
import {
  batchEndWarningOrder,
  getCurrentByOrderIdAndLinkId,
} from "@/api/modules/eventManagement/eventManagement";
import { getPermissionMap } from "./footerButtonGroupPermiMap";
import { $getUrlParam } from "@/utils/common";
import {
  checkAlarmOrder,
  localCheckAlarmOrder,
} from "@/api/modules/custManage/custEventJudge";
import EventBus from "@/utils/event-bus";
export default {
  name: "eventButtonGroup",
  props: {
    orderData: {
      type: Object,
      default: () => ({}),
      required: true,
    },
    hideFooterButtonGroup: {
      type: Boolean,
      default: false,
    },
  },
  inject: ["isRecycleBin", "isEventQuery", "isCustOperate"],
  components: {
    TrueWarnDialog,
    FalseWarnDialog,
    RepeatDialog,
    RedeployDialog,
    RollbackDialog,
    InstructionsDialog,
    AlarmLabel,
    CloseEventDialog,
    DispatchDialog,
    HandleDialog,
    CheckDialog,
    SupervisionDialog,
  },
  computed: {
    // 是否是属地运营研判（运营管理目录下）
    localFlag() {
      return this.isCustOperate && this.$route.query.localFlag === "1";
    },
    showEditAlarmLabelBtn() {
      return (
        this.orderData.warningOrderId &&
        !this.isDisabled() &&
        $getUrlParam("page") !== "12" &&
        $getUrlParam("page") !== "13"
      );
    },
    isLeader() {
      return this.$store.getters.userInfo.roleIds.includes("8");
    },
  },
  data() {
    return {
      showLabelConfig: false, // 是否展示编辑告警标签弹窗
      isFalseWarn: false, // 是否展示误报弹窗
      isTrueWarn: false, // 是否展示真警弹窗
      isRepeat: false, // 是否展示重复告警弹窗
      isInstructions: false, // 是否展示转领导批示弹窗
      isRedeploy: false, // 是否展示转派弹窗
      isRollback: false, // 是否展示回退弹窗
      closeRemarkVisible: false, // 是否展示关闭弹窗
      isDispatch: false, // 是否展示调度弹窗
      isHandle: false, // 是否展示处置弹窗
      isCheck: false, // 是否展示核实弹窗
      permissionMap: {}, // 权限映射
      isSupervision: false, // 是否为督办弹窗
      player: null, // 视频播放器实例
    };
  },
  watch: {
    "orderData.realLinkType": {
      handler() {
        this.getPermissionMap();
      },
      immediate: true,
    },
    "orderData.warningOrderId": {
      handler() {
        this.player?.closeAllVideo();
      },
    },
  },
  beforeDestroy() {
    this.player?.closeAllVideo();
  },
  methods: {
    /**
     * 获取回收站page页签id 11（告警压制） 12（删除告警） 13（转移告警）
     * @returns {string|string}
     */
    getRecycleBinPage() {
      console.log($getUrlParam("page"), "page信息");
      return $getUrlParam("page");
    },
    /**
     * 打开编辑标签弹窗
     */
    editAlarmLabel() {
      // 事件查询启用ifEdit，回收站禁用无效
      if (this.orderData.ifEdit === 0 && this.isEventQuery) {
        return $message.error("您没有该事件的处理权限");
      }
      this.showLabelConfig = true;
    },
    /**
     * 摄像机转向告警点
     */
    toPTZ() {
      const {
        deviceCode,
        channelCode,
        pan,
        tilt,
        zoom,
        presetId,
        ptzP,
        ptzT,
        ptzZ,
      } = this.orderData;
      let ptzFlag =
        Number(pan) !== 0 || Number(tilt) !== 0 || Number(zoom) !== 0;
      // 转动至ptz
      if (ptzFlag) {
        doPtzLocationCmd({
          deviceCode,
          channelCode,
          pan: pan || ptzP,
          tilt: tilt || ptzT,
          zoom: zoom || ptzZ,
          ptzIsEsc: "1",
        }).then((res) => {
          if (res.code == 200) {
            this.videoClick();
          } else {
            $message.a(res);
          }
        });
      }
      //转动至预置位
      if (!ptzFlag && presetId != "") {
        let params = {
          deviceCode: deviceCode, //设备编码
          channelCode: channelCode, //通道编码
          presetId: presetId, //预置位 id
          customerCode: this.$store.getters.userInfo.tenantId, //租户id
        };
        doControlPreset(params).then((res) => {
          if (res.code === 200) {
            $message.success("操作成功");
            this.videoClick();
          } else {
            $message.a(res);
          }
        });
      }
    },
    /**
     *  实时视频
     * @returns {Promise<void>}
     */
    async videoClick() {
      let _this = this;
      let channelCodeList = [];
      if (this.isDisabled()) {
        getDeviceChannel4Tt({ deviceCode: this.orderData.deviceCode }).then(
          (res) => {
            if (res.code === 200) {
              channelCodeList = res.data.channels; // 通道列表
              if (channelCodeList && channelCodeList.length > 0) {
                let channelCodeData = {
                  isVideoList: channelCodeList.map((item) => {
                    return {
                      deviceCode: this.orderData.deviceCode,
                      channelCode: item.channelCode,
                      monitorName: item.channelName,
                    };
                  }),
                  numberList: channelCodeList.length,
                  videoThis: this,
                };
                this.player = this.$splitScreen(channelCodeData);
              }
            }
          }
        );
      } else {
        getDeviceInfo({
          deviceCode: this.orderData.deviceCode,
          operType: "1",
          tenantId: this.$store.getters.userInfo.tenantId,
        }).then((res) => {
          if (res.code === 200) {
            channelCodeList = res.data.children; // 通道列表
            if (channelCodeList && channelCodeList.length > 0) {
              let channelCodeData = {
                isVideoList: channelCodeList.map((item) => {
                  return {
                    channelCode: item.channelCode,
                    monitorName: item.channelName,
                    deviceCode: item.parentDeviceCode,
                  };
                }),
                numberList: channelCodeList.length,
                videoThis: this,
              };
              this.player = this.$splitScreen(channelCodeData);
            }
          }
        });
      }
    },
    getShowPTZ() {
      let orderData = this.orderData;
      let noValue =
        orderData.pan !== undefined &&
        orderData.tilt !== undefined &&
        orderData.zoom !== undefined; // 无pan 等值
      let noStrValue =
        orderData.pan != "" && orderData.tilt != "" && orderData.zoom != ""; // pan 等值为''
      let noNumValue =
        Number(orderData.pan) !== 0 ||
        Number(orderData.tilt) !== 0 ||
        Number(orderData.zoom) !== 0; // pan等值为0或0.0等
      if (
        this.isCustOperate ||
        (this.isRecycleBin && $getUrlParam("page") === "11")
      ) {
        const { ptzP, ptzT, ptzZ, warningSource, presetId } = this.orderData;
        return (
          (warningSource == "1" || warningSource == "4") &&
          ((parseFloat(ptzP) && parseFloat(ptzT) && parseFloat(ptzZ)) ||
            presetId)
        );
      } else {
        return (
          (orderData.warningSource == "1" || orderData.warningSource == "4") &&
          ((noValue && noNumValue && noStrValue) || orderData.presetId)
        );
      }
    },
    /**
     * 事件受理
     */
    async alarmAccept() {
      const flag = await this.checkEventIfEdit(true);
      if (!flag) {
        return;
      }
      this.$confirm("请确认是否受理此事件?", "受理", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = {
          warningOrderId: this.orderData.warningOrderId,
          linkId: this.orderData.linkId,
          tenantId: this.$store.getters.userInfo.tenantId,
          timeLimit: this.orderData.timeLimit,
          flowId: this.orderData.flowId,
          orderStatus: this.orderData.orderStatus,
          address: this.orderData.address,
          warningTypeId: this.orderData.warningTypeId,
          appVerCode: this.$store.getters.userInfo.appVerCode,
          industryCode: this.$store.getters.userInfo.industryCode,
          alarmTime: this.orderData.alarmTime,
          alarmReason: this.orderData.alarmReason, // 告警原因
          devicePitch: this.orderData.devicePitch, // 俯仰角
          deviceHorizontal: this.orderData.deviceHorizontal, // 水平角
        };
        accept(params).then((res) => {
          if (res.code === 200) {
            this.$store.dispatch("tagsView/delView", this.$route);
            this.refreshSelectedTag(this.$route, this.orderData.realLinkType);
            $message.success("受理成功!");
          } else {
            $message.error(res.msg);
          }
        });
      });
    },
    /**
     * 回收站置为真警方法
     * @param val
     */
    trueWarnClick() {
      const params = { orderId: this.orderData.warningOrderId };
      params.devicePitch = this.orderData.devicePitch; // 俯仰角
      params.alarmReason = this.orderData.alarmReason; // 告警原因
      params.deviceHorizontal = this.orderData.deviceHorizontal; // 水平角
      if (this.orderData.updateAddress) {
        params.address = this.orderData.address;
        params.longitude = this.orderData.longitude;
        params.latitude = this.orderData.latitude;
        params.gridId = this.orderData.gridId;
        params.gridName = this.orderData.gridName;
        params.horiAzimuthAngle = this.orderData.horiAzimuthAngle;
        params.checkGridFlag = "1"; // 是否修改网格员  1 是  0 否
      } else {
        params.checkGridFlag = "0";
      }
      params.warningTypeId = this.orderData.warningTypeId;
      this.$confirm("是否需要将该告警事件进行真警处理？", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        showClose: false,
      }).then(() =>
        restoreWarningOrder(params).then((res) => {
          if (res.code === 200) {
            $message.success("真警成功");
            this.$store.dispatch("tagsView/delView", this.$route);
            this.$router.push("/eventManagement/recycleBin");
          } else {
            $message.warning(res.msg);
          }
        })
      );
    },
    /**
     * 通用的打开弹窗方法
     * @param key 弹窗绑定的visible名称
     */
    async commonClick(key) {
      console.log(this.$store.getters.userInfo, "用户信息");
      const flag = await this.checkEventIfEdit();
      if (!flag) {
        return;
      }
      this.$set(this, key, true);
    },
    /**
     * 校验当前告警是否处于此环节
     * @param flag
     * @returns {Promise<boolean>}
     */
    async checkCurrentLink(flag) {
      let params = {
        linkId: this.orderData.linkId,
        orderId: this.orderData.warningOrderId,
        realLinkType: this.orderData.realLinkType,
      };
      if (this.orderData.enableAcceptanceMode === "1" && flag) {
        params.enableAcceptanceMode = "1";
      }
      let currentLinkStatus = true;
      let res = await getCurrentByOrderIdAndLinkId(params);
      if (res.code == 200) {
        res.data.ifCurrentLink == "1"
          ? (currentLinkStatus = true)
          : (currentLinkStatus = false);
      }
      return currentLinkStatus;
    },
    /**
     * 判断事件的处理权限
     */
    async checkEventIfEdit(flag) {
      if (this.orderData.ifEdit === 0) {
        $message.error("您没有该事件的处理权限");
        return false;
      }
      let currentStatus = await this.checkCurrentLink(flag);
      if (!currentStatus) {
        $message.warning("该事件环节已处理完成，请刷新列表");
        return false;
      }
      return true;
    },
    /**
     * 判断租户或者铁塔视角
     * @returns {boolean} true/false 铁塔/租户
     */
    isDisabled() {
      let source = this.$store.getters.userInfo.userType;
      return source === "0";
    },
    /**
     * 分配权限标识
     */
    getPermissionMap() {
      const menuMap = {
        1: "judgeMenu",
        2: "dispatchMenu",
        4: "handleMenu",
        5: "checkMenu",
      };
      if (this.isEventQuery) {
        this.permissionMap = getPermissionMap(
          menuMap[this.orderData.realLinkType]
        );
      }
    },
    /**
     * 运营研判-真警
     */
    trueWarnClickByCustOperate() {
      let params = {
        orderId: this.orderData.orderId,
        warningOrderId: this.orderData.warningOrderId,
        judgeResult: "1", //0-误报、1-真警、2-重复报警
        checkMan: this.$store.getters.userInfo.userId, //研判人员ID
      };
      if (this.orderData.updateAddress) {
        params.longitude = this.orderData.longitude;
        params.latitude = this.orderData.latitude;
        params.provinceId = this.orderData.provinceId;
        params.cityId = this.orderData.cityId;
        params.countyId = this.orderData.countyId;
        params.address = this.orderData.address;
        params.gridId = this.orderData.gridId;
        params.gridName = this.orderData.gridName;
        params.horiAzimuthAngle = this.orderData.horiAzimuthAngle;
        params.checkGridFlag = "1"; // 是否修改网格员  1 是  0 否
      } else {
        params.checkGridFlag = "0";
      }
      params.warningTypeId = this.orderData.warningTypeId;
      params.devicePitch = this.orderData.devicePitch; // 俯仰角
      params.deviceHorizontal = this.orderData.deviceHorizontal; // 水平角

      // 判断是否是本地研判
      const promise = this.localFlag
        ? localCheckAlarmOrder([params])
        : checkAlarmOrder(params);

      promise.then((resp) => {
        if (resp && resp.code == 200) {
          $message.success("研判成功");
          this.$set(this.orderData, "judgeResult", 1);
          // 刷新页面数据
          this.$emit("reloadOrderData", "judge");
        } else {
          $message.warning(resp.msg);
        }
      });
    },
    /**
     * 运营研判-误报
     * @param value 0/1 算法问题/非算法问题
     */
    falseWarnClickByCustOperate(value) {
      let params = {
        orderId: this.orderData.orderId,
        warningOrderId: this.orderData.warningOrderId,
        judgeResult: "0", //0-误报、1-真警、2-重复报警
        checkMan: this.$store.getters.userInfo.userId, //研判人员ID
      };
      if (this.orderData.updateAddress) {
        params.longitude = this.orderData.longitude;
        params.latitude = this.orderData.latitude;
        params.provinceId = this.orderData.provinceId;
        params.cityId = this.orderData.cityId;
        params.countyId = this.orderData.countyId;
        params.address = this.orderData.address;
        params.gridId = this.orderData.gridId;
        params.gridName = this.orderData.gridName;
        params.horiAzimuthAngle = this.orderData.horiAzimuthAngle;
        params.checkGridFlag = "1"; // 是否修改网格员  1 是  0 否
      } else {
        params.checkGridFlag = "0";
      }
      params.resultTab = value; // 0 算法问题  1  非算法问题 string
      params.warningTypeId = this.orderData.warningTypeId;
      params.devicePitch = this.orderData.devicePitch; // 俯仰角
      params.deviceHorizontal = this.orderData.deviceHorizontal; // 水平角

      // 判断是否是本地研判

      const promise = this.localFlag
        ? localCheckAlarmOrder([params])
        : checkAlarmOrder(params);

      promise
        .then((resp) => {
          this.$refs.popover.doClose();
          if (resp && resp.code === 200) {
            $message.success("研判成功");
            this.$set(this.orderData, "judgeResult", 1);
            // 刷新页面数据
            this.$emit("reloadOrderData", "judge");
          } else {
            $message.error(resp.msg);
          }
        })
        .catch((e) => {
          this.$refs.popover.doClose();
        });
    },
    refreshSelectedTag(view, realLinkType) {
      location.reload();
    },
    replaceParamVal(oUrl, paramName, replaceWith) {
      var re = eval("/(" + paramName + "=)([^&]*)/gi");
      var nUrl = oUrl.replace(re, paramName + "=" + replaceWith);
      return nUrl;
    },
  },
};
</script>

<style lang="scss" scoped>
.footer-button-group {
  .flex {
    display: flex;
    align-items: center;
  }
  .custom-hr {
    background-color: #f0f0f0;
    border: none;
    height: 1px;
    margin: 0px;
  }
  /deep/.el-button + .el-button {
    margin-left: 12px;
  }
  .buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
  }
  .ml-12 {
    margin-left: 12px;
  }
  .divider {
    height: 28px;
  }
}
</style>
